<template>
  <el-container style="height:100%;">
    <el-header>码表管理</el-header>
    <el-container>
      <el-aside>
        <el-main>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>目录</span>
            </div>
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="filterText"></el-input>
            <el-tree
              class="filter-tree"
              :data="treeData"
              :props="defaultProps"
              default-expand-all
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              @node-click="treeItemClick"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <i v-if="data.id == 0" class="el-icon-plus" @click.stop="() => add(node, data)"></i>
                  <i class="el-icon-delete" v-if="data.id != 0" @click.stop="() => del(node, data)"></i>
                </span>
              </span>
            </el-tree>
          </el-card>
        </el-main>
      </el-aside>
      <el-main>
        <v-dictgrid :dirId="dirId" :dirName="dirName"></v-dictgrid>
      </el-main>
    </el-container>
    <v-dirdialog
      :dialogVisible="dialogVisible"
      :pDir="pDir"
      @dialogClose="dialogClose"
      @dialogSave="dialogSave"
    ></v-dirdialog>
  </el-container>
</template>
<script>
import dirDialog from "./view/DirDialog";
import dictGrid from "./view/DictGrid";

export default {
  components: {
    "v-dirdialog": dirDialog,
    "v-dictgrid": dictGrid
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.loadTreeData();
  },
  computed: {
    treeData() {
      return [
        {
          id: 0,
          name: "全部",
          children: this.data
        }
      ];
    }
  },
  data() {
    return {
      dirId:0,
      dirName:"",
      dialogVisible: false,
      pDir: {},
      filterText: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  methods: {
    dialogClose() {
      this.dialogVisible = false;
    },
    dialogSave() {
      this.dialogVisible = false;
      this.loadTreeData();
    },
    treeItemClick(data, node, item){
      this.dirId = data.id;
      this.dirName = data.name;
    },
    add(node, data) {
      this.pDir = {
        id: data.id,
        name: data.name
      };
      this.dialogVisible = true;
    },
    del(node, data) {
      let _this = this;
      this.axios
        .post(this.HOST + "/dir/delete", {
          id: data.id
        })
        .then(function(res) {
          if (!res.data.status) {
            _this.$alert(res.data.msg, "提示", {
              confirmButtonText: "确定"
            });
            return;
          }
          _this.loadTreeData();
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    loadTreeData() {
      let _this = this;
      this.axios
        .post(this.HOST + "/dir/tree")
        .then(function(res) {
          _this.data = res.data.data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  }
};
</script>
<style scoped>
.el-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
.el-aside {
  display: flex;
}
.box-card {
  height: calc(100% - 2px);
}
.clearfix {
  text-align: start;
}
.btn {
  float: right;
  padding: 3px 0;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node i {
  margin-left: 10px;
}
</style>
